<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>todos <small>(1.5)</small></h1>
      <div class="addTodo">
        <input class="textfield" placeholder="add todo" />
        <button class="submit">Add</button>
      </div>
      <nav class="filter">
        <button class="selected">all</button>
        <button>active</button>
        <button>completed</button>
      </nav>
    </header>

    <ul class="todos">
      <li class="todo">
        <label><input type="checkbox" /> Todo 1</label>
      </li>
      <li class="todo">
        <label><input type="checkbox" /> Todo 2</label>
      </li>
      <li class="todo">
        <label><input type="checkbox" /> Todo 3</label>
      </li>
      <li class="todo">
        <label><input type="checkbox" /> Todo 4</label>
      </li>
    </ul>
    <footer>
      <span>4 items left</span>
      <button class="submit">Clear Completed</button>
    </footer>
  </body>
</html>
